<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习复习计划管理系统</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
    <!--  -->
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #ff6b6b, #ee5a24);
            color: white;
            padding: 40px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 10px;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        .header p {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        .upload-section {
            padding: 40px;
            text-align: center;
        }

        .upload-area {
            border: 3px dashed #ddd;
            border-radius: 15px;
            padding: 60px 40px;
            background: #f8f9fa;
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .upload-area:hover {
            border-color: #667eea;
            background: #f0f4ff;
            transform: translateY(-2px);
        }

        .upload-area.dragover {
            border-color: #667eea;
            background: #e6f3ff;
            transform: scale(1.02);
        }

        .upload-icon {
            font-size: 3rem;
            color: #667eea;
            margin-bottom: 20px;
        }

        .upload-text {
            font-size: 1.2rem;
            color: #333;
            margin-bottom: 10px;
            font-weight: 600;
        }

        .upload-hint {
            color: #666;
            font-size: 0.9rem;
        }

        #fileInput {
            display: none;
        }

        .btn {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 20px;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
        }

        .btn:active {
            transform: translateY(0);
        }

        .results {
            padding: 40px;
            display: none;
        }

        .date-display {
            background: linear-gradient(135deg, #4facfe, #00f2fe);
            color: white;
            padding: 20px;
            border-radius: 15px;
            text-align: center;
            margin-bottom: 30px;
        }

        .date-display h2 {
            font-size: 1.8rem;
            margin-bottom: 5px;
        }

        .review-list {
            display: grid;
            gap: 20px;
        }

        .review-item {
            background: white;
            border: 2px solid #e9ecef;
            border-radius: 15px;
            padding: 25px;
            transition: all 0.3s ease;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .review-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
            border-color: #667eea;
        }

        .subject-name {
            font-size: 1.4rem;
            font-weight: 700;
            color: #333;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .review-type {
            display: inline-block;
            background: linear-gradient(135deg, #ff6b6b, #ee5a24);
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .review-details {
            color: #666;
            font-size: 1rem;
            line-height: 1.6;
        }

        .no-reviews {
            text-align: center;
            padding: 60px;
            color: #666;
        }

        .no-reviews-icon {
            font-size: 4rem;
            color: #ddd;
            margin-bottom: 20px;
        }

        .error {
            background: #ffe6e6;
            color: #d63031;
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
            border-left: 4px solid #d63031;
        }

        .loading {
            text-align: center;
            padding: 40px;
            display: none;
        }

        .spinner {
            width: 50px;
            height: 50px;
            border: 4px solid #e9ecef;
            border-top: 4px solid #667eea;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 20px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .reset-btn {
            background: #6c757d;
            margin-left: 10px;
        }

        .reset-btn:hover {
            background: #5a6268;
            box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>📚 学习复习计划管理</h1>
            <p>上传您的复习计划表格，智能识别今日需要复习的内容</p>
        </div>

        <div class="upload-section">
            <div class="upload-area" id="uploadArea">
                <div class="upload-icon">📁</div>
                <div class="upload-text">点击或拖拽上传 Excel 文件</div>
                <div class="upload-hint">支持 .xlsx 格式文件</div>
                <input type="file" id="fileInput" accept=".xlsx,.xls">
                <button class="btn" onclick="document.getElementById('fileInput').click()">
                    选择文件
                </button>
            </div>
        </div>

        <div class="loading" id="loading">
            <div class="spinner"></div>
            <p>正在分析您的复习计划...</p>
        </div>

        <div class="results" id="results">
            <div class="date-display">
                <h2 id="currentDate"></h2>
                <p>今日复习任务</p>
            </div>
            
            <div class="review-list" id="reviewList">
            </div>

            <div style="text-align: center; margin-top: 30px;">
                <button class="btn reset-btn" onclick="resetApp()">重新上传</button>
            </div>
        </div>
    </div>

    <script>
        // 设置当前日期
        function setCurrentDate() {
            const today = new Date();
            const options = { 
                year: 'numeric', 
                month: 'long', 
                day: 'numeric',
                weekday: 'long'
            };
            document.getElementById('currentDate').textContent = 
                today.toLocaleDateString('zh-CN', options);
        }

        // 拖拽上传功能
        const uploadArea = document.getElementById('uploadArea');
        const fileInput = document.getElementById('fileInput');

        uploadArea.addEventListener('click', (e) => {
            // 防止按钮的点击事件冒泡触发上传区域的点击
            if (e.target.tagName !== 'BUTTON') {
                fileInput.click();
            }
        });

        uploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadArea.classList.add('dragover');
        });

        uploadArea.addEventListener('dragleave', () => {
            uploadArea.classList.remove('dragover');
        });

        uploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadArea.classList.remove('dragover');
            const files = e.dataTransfer.files;
            if (files.length > 0) {
                handleFile(files[0]);
            }
        });

        fileInput.addEventListener('change', (e) => {
            if (e.target.files.length > 0) {
                handleFile(e.target.files[0]);
            }
        });

        // 处理文件上传
        function handleFile(file) {
            if (!file.name.match(/\.(xlsx|xls)$/)) {
                showError('请选择 Excel 文件 (.xlsx 或 .xls)');
                return;
            }

            showLoading(true);
            
            const reader = new FileReader();
            reader.onload = function(e) {
                try {
                    const data = new Uint8Array(e.target.result);
                    const workbook = XLSX.read(data, { type: 'array' });
                    
                    // 读取第一个工作表
                    const firstSheetName = workbook.SheetNames[0];
                    const worksheet = workbook.Sheets[firstSheetName];
                    
                    // 转换为JSON
                    const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
                    
                    // 处理数据并显示结果
                    processStudyData(jsonData);
                    
                } catch (error) {
                    console.error('文件解析错误:', error);
                    showError('文件解析失败，请确保文件格式正确');
                } finally {
                    showLoading(false);
                }
            };
            
            reader.readAsArrayBuffer(file);
        }

        // 显示加载状态
        function showLoading(show) {
            document.getElementById('loading').style.display = show ? 'block' : 'none';
            document.querySelector('.upload-section').style.display = show ? 'none' : 'block';
        }

        // 显示错误信息
        function showError(message) {
            const uploadSection = document.querySelector('.upload-section');
            let errorDiv = document.querySelector('.error');
            
            if (errorDiv) {
                errorDiv.remove();
            }
            
            errorDiv = document.createElement('div');
            errorDiv.className = 'error';
            errorDiv.textContent = message;
            uploadSection.appendChild(errorDiv);
            
            setTimeout(() => {
                if (errorDiv) errorDiv.remove();
            }, 5000);
        }

        // 处理学习数据
        function processStudyData(data) {
            if (data.length < 2) {
                showError('数据格式不正确，至少需要标题行和一行数据');
                return;
            }

            const headers = data[0];
            const today = new Date();
            const todayString = formatDate(today);
            
            const reviewTasks = [];

            // 从第二行开始处理数据（跳过标题行）
            for (let i = 1; i < data.length; i++) {
                const row = data[i];
                if (!row || row.length < 2) continue;
                
                const subject = row[0];
                if (!subject || subject.toString().trim() === '') continue;

                // 检查每个复习日期列（跳过第1次学习列）
                for (let j = 1; j < Math.min(row.length, headers.length); j++) {
                    const headerName = headers[j];
                    
                    // 排除第1次学习列
                    if (headerName && headerName.toString().includes('第1次学习')) {
                        continue;
                    }
                    
                    const cellValue = row[j];
                    if (!cellValue) continue;
                    
                    const dateStr = parseExcelDate(cellValue);
                    if (dateStr === todayString) {
                        const reviewType = headerName || `复习${j}`;
                        reviewTasks.push({
                            subject: subject.toString().trim(),
                            reviewType: reviewType.toString().trim(),
                            date: dateStr
                        });
                    }
                }
            }

            displayResults(reviewTasks);
        }

        // 解析Excel日期
        function parseExcelDate(value) {
            try {
                // 如果是数字（Excel日期序列号）
                if (typeof value === 'number') {
                    const date = XLSX.SSF.parse_date_code(value);
                    return `${date.y}/${date.m.toString().padStart(2, '0')}/${date.d.toString().padStart(2, '0')}`;
                }
                
                // 如果是字符串
                if (typeof value === 'string') {
                    // 尝试解析不同格式的日期
                    const dateStr = value.trim();
                    
                    // 格式：YYYY/M/D 或 YYYY/MM/DD
                    if (dateStr.match(/^\d{4}\/\d{1,2}\/\d{1,2}$/)) {
                        const parts = dateStr.split('/');
                        return `${parts[0]}/${parts[1].padStart(2, '0')}/${parts[2].padStart(2, '0')}`;
                    }
                    
                    // 格式：YYYY-M-D 或 YYYY-MM-DD
                    if (dateStr.match(/^\d{4}-\d{1,2}-\d{1,2}$/)) {
                        const parts = dateStr.split('-');
                        return `${parts[0]}/${parts[1].padStart(2, '0')}/${parts[2].padStart(2, '0')}`;
                    }
                    
                    // 其他日期格式尝试用Date解析
                    const date = new Date(dateStr);
                    if (!isNaN(date.getTime())) {
                        return formatDate(date);
                    }
                }
            } catch (error) {
                console.error('日期解析错误:', error, value);
            }
            
            return null;
        }

        // 格式化日期为 YYYY/MM/DD
        function formatDate(date) {
            const year = date.getFullYear();
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const day = date.getDate().toString().padStart(2, '0');
            return `${year}/${month}/${day}`;
        }

        // 显示结果
        function displayResults(reviewTasks) {
            const reviewList = document.getElementById('reviewList');
            reviewList.innerHTML = '';

            if (reviewTasks.length === 0) {
                reviewList.innerHTML = `
                    <div class="no-reviews">
                        <div class="no-reviews-icon">🎉</div>
                        <h3>今天没有复习任务</h3>
                        <p>您今天可以休息或者学习新内容！</p>
                    </div>
                `;
            } else {
                // 按科目分组
                const groupedTasks = {};
                reviewTasks.forEach(task => {
                    if (!groupedTasks[task.subject]) {
                        groupedTasks[task.subject] = [];
                    }
                    groupedTasks[task.subject].push(task);
                });

                // 显示每个科目的复习任务
                Object.keys(groupedTasks).forEach(subject => {
                    const tasks = groupedTasks[subject];
                    const reviewTypes = tasks.map(task => task.reviewType).join('、');
                    
                    const reviewItem = document.createElement('div');
                    reviewItem.className = 'review-item';
                    reviewItem.innerHTML = `
                        <div class="subject-name">
                            📖 ${subject}
                            <span class="review-type">${tasks.length}个任务</span>
                        </div>
                        <div class="review-details">
                            <strong>需要进行：</strong>${reviewTypes}<br>
                            <strong>复习日期：</strong>${tasks[0].date}
                        </div>
                    `;
                    reviewList.appendChild(reviewItem);
                });
            }

            // 显示结果区域
            document.querySelector('.upload-section').style.display = 'none';
            document.getElementById('results').style.display = 'block';
        }

        // 重置应用
        function resetApp() {
            document.querySelector('.upload-section').style.display = 'block';
            document.getElementById('results').style.display = 'none';
            document.getElementById('fileInput').value = '';
            
            // 清除错误信息
            const errorDiv = document.querySelector('.error');
            if (errorDiv) errorDiv.remove();
        }

        // 初始化
        setCurrentDate();
    </script>
</body>
</html>